<template>
  <view :class="theme">
    <view v-for="(item, index) in records.list" :key="item.id" class="fd-row ai-end mb-40 ml-40 mr-40">
      <text class="f1 fs-28 multi-ellipsis color-3">{{ item.goods_name || "-" }}</text>
      <text class="ml-16 color-6">{{ item.create_at || "-" }}</text>
    </view>

    <view class="mt-30 mb-30 ai-center">
      <u-image v-if="!records.list.length" :showLoading="false" width="400" height="400" class="mt-60 mb-30"
        src="/static/img/blank.png" />
      <u-loadmore :status="records.cache.status" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { pager } from "@/common/libs/utils";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { reactive } from "vue";

const { theme } = useMapState(["theme"]);

const records = reactive({
  page: 0,
  limit: 20,
  cache: {
    page: 1,
    list: [] as any[],
    status: "nomore"
  },
  next: false,
  list: [] as AnyObject[]
});

onLoad(() => { getRecords(); });

const getRecords = () => {
  pager({ url: "/openLog" }, records);
}
onReachBottom(() => getRecords());

</script>

<style lang="scss" scoped>
// scss
.light,
.dark {
  padding-top: 40rpx;
}
</style>